<!--  -->
<template>
  <div class='corporateinfo'>
    <!-- <Header-Comp title="法人信息" /> -->
    <van-form ref="form"
              class="corporateinfo_container">

      <van-field label=""><template #input>
          <h3>法人信息</h3>
        </template>
      </van-field>
      <van-field name="img">
        <template #input>
          <div class="corporateinfo_img">
            <div class="corporateinfo_img_div corporateinfo_img_just">
              <p>{{data.legalName}}</p>
              <span> {{data.legalIdcard}}</span>
            </div>
            <div class="corporateinfo_img_div corporateinfo_img_back"> </div>
          </div>
        </template>
      </van-field>
      <van-field label-width="100px"
                 label="姓名"
                 readonly>
        <template #input>
          {{data.legalName}}
        </template>
      </van-field>
      <van-field label-width="100px"
                 label="证件号码"
                 readonly>
        <template #input>
          {{data.legalIdcard}}
        </template>
      </van-field>
      <van-field label-width="100px"
                 label="证件有效期"
                 readonly>
        <template #input>
          {{data.legalIdcardExp}}
        </template>
      </van-field>
    </van-form>
    <van-form ref="form"
              class="corporateinfo_container"
              v-if="data.merchantAccountType == 3">
      <van-field label=""><template #input>
          <h3>非法人信息</h3>
        </template>
      </van-field>
      <van-field name="img">
        <template #input>
          <div class="corporateinfo_img">
            <div class="corporateinfo_img_div corporateinfo_img_just">
              <p>{{data.mrcAccount.accountName}}</p>
              <span v-if="data.mrcAccount.accountIdcard"> {{data.mrcAccount.accountIdcard.replace(/^(.{6})(?:\w+)(.{4})$/, "\$1********\$2")}}</span>
            </div>
            <div class="corporateinfo_img_div corporateinfo_img_back"> </div>
          </div>
        </template>
      </van-field>
      <van-field label-width="100px"
                 label="姓名"
                 readonly>
        <template #input>
          {{data.mrcAccount.accountName}}
        </template>
      </van-field>
      <van-field label-width="100px"
                 label="证件号码"
                 readonly>
        <template #input>
          {{data.mrcAccount.accountIdcard}}
        </template>
      </van-field>
      <van-field label-width="100px"
                 label="证件有效期"
                 readonly>
        <template #input>
          {{data.mrcAccount.accountIdcardExp}}
        </template>
      </van-field>
    </van-form>
  </div>
</template>

<script>
import { ImagePreview } from 'vant';
// import { mrcdetail, } from "@/api/mreinfo";
import { cardSecret } from "@/utils/utils.js";
export default {
  components: {
    HeaderComp: () => import('@/components/HeaderComp')
  },
  data () {
    //这里存放数据
    return {
      data: {}
    };
  },
  created () {

    var data = {
      id: this.$route.query.id,
      type: this.$route.query.type
    }
    this.$store
      .dispatch("Getmrcdetail", data).then(res => {
        this.data = res
        this.data.legalIdcard = cardSecret(this.data.legalIdcard)
        this.data.mrcAccount.accountIdcard = cardSecret(this.data.mrcAccount.accountIdcard)
        this.data.mrcAccountAttach.map(v => {
          if (v.fileType == 1) {
            this.data.justImg = v.watermarkImg
          }
          if (v.fileType == 2) {
            this.data.oppositeImg = v.watermarkImg
          }
          // 非法人信息
          if (v.fileType == 6) {
            this.data.nonjustImg = v.watermarkImg
          }
          if (v.fileType == 7) {
            this.data.nonoppositeImg = v.watermarkImg
          }
        })
      })
  },
  //生命周期 - 挂载完成（可以访问DOM元素）
  mounted () { },
  //方法集合
  methods: {
    // 图片预览
    sceneImg (images) {
      ImagePreview({
        images: [images], //需要预览的图片 URL 数组
        showIndex: false, //是否显示页码
        loop: false, //是否开启循环播放 
      })
    },
  },
}
</script>
<style lang='less' scoped>
.corporateinfo {
  height: 100%;
  background-color: #f7f7f7;
  padding-bottom: 77px;
  padding-top: 26px;
  .corporateinfo_container {
    background: #ffffff;
    // margin-top: 26px;
    h4 {
      font-size: 31px;
      font-family: PingFang SC;
      font-weight: 500;
      color: #131313;
      padding: 40px 0px 40px 30px;
    }
    .corporateinfo_img {
      display: flex;
      justify-content: space-between;
      width: 100%;
      height: 200px;
      .corporateinfo_img_div {
        width: 48%;
      }
      .corporateinfo_img_just {
        background: url('../../assets/img/just.png') no-repeat;
        background-size: 100%;
        font-size: 19px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #131313;
        padding-top: 40px;
        padding-left: 115px;
      }
      .corporateinfo_img_back {
        background: url('../../assets/img/back.png') no-repeat;
        background-size: 100%;
      }
    }
  }
  .corporateinfo_list {
    height: 94px;
    background: #ffffff;
    border-radius: 10px;
    border-bottom: 2px solid #e3e3e3;
    display: flex;
    align-items: center;
    padding: 0 32px;
    .corporateinfo_list_left {
      flex: 0 0 40%;
      font-size: 31px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #3d3d3d;
    }
    .corporateinfo_list_right {
      flex: 0 0 60%;
      font-size: 31px;
      font-family: PingFang SC;
      font-weight: 400;
      color: #131313;
    }
  }
  /deep/ .van-image {
    width: 48%;
    height: 200px;
    background: #191919;
    img {
      width: auto;
      margin: 0 auto;
    }
  }
  /deep/ .van-field__label {
    // font-size: 32px;
    color: #3d3d3d;
  }
  /deep/ .van-field__control {
    // font-size: 32px;
    color: #333333;
  }
}
</style>